<template>
    <el-row>
        <el-row v-if="posts&&posts.length>0">
            <el-col :span="24" v-if="self">
                <el-button class="management-btn" :type="btnType" @click="management=!management" circle>
                    <icon-font href="#ceshezhi"></icon-font>
                </el-button>
            </el-col>
            <el-col :span="24" v-for="post in posts" :key="post.id">
                <post-item-plus :post="post"
                                :management="management"
                                class="post-item-plus"
                                link
                                @deletePost="deletePost"
                                @changeLabelAttention="changeLabelAttention"></post-item-plus>
            </el-col>
        </el-row>
        <div class="none" v-else>
            <div v-if="self">您没有发布过任何帖子</div>
            <div v-else>这个人很懒，没有发布过帖子</div>
        </div>
        <el-col :span="18" :offset="3">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageInfo.page"
                :page-sizes="pageInfo.sizes"
                :page-size="pageInfo.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageInfo.total">
            </el-pagination>
        </el-col>
    </el-row>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'
    import PostItemPlus from '@/components/post/PostItemPlus'

    export default {
        name: 'posts',
        components: {
            PostItemPlus
        },
        data () {
            return {
                id: '',
                management: false,
                pageInfo: {
                    page: 1,
                    size: 20,
                    total: 0,
                    sizes: [20, 50, 100, 200, 300, 400]
                },
                posts: []
            }
        },
        props: {
            self: {
                type: Boolean,
                required: false,
                default: false
            }
        },
        watch: {
            $route (to, from) {
                if (this.getUser) {
                    this.action(this.currentCollectPostsAction())
                }
                this.parseURL()
                this.obtainPosts()
            }
        },
        mounted () {
            if (this.getUser) {
                this.action(this.currentCollectPostsAction())
            }
            this.parseURL()
            this.obtainPosts()
        },
        computed: {
            ...mapGetters({
                getUser: 'user/getUser'
            }),
            btnType () {
                return this.management ? 'danger' : 'success'
            }
        },
        methods: {
            ...mapActions({
                deletePostAction: 'post/deletePost',
                currentCollectPostsAction: 'post/currentCollectPosts',
                pageCurrentPostsAction: 'post/pageCurrentPosts',
                pageAuthorPostsAction: 'post/pageAuthorPosts'
            }),
            parseURL () {
                let paths = this.$route.path.split('/')
                if (paths.length === 3) {
                    this.id = this.getUser.userId
                } else if (paths.length === 4) {
                    this.id = paths[3]
                }
            },
            handleSizeChange (val) {
                this.pageInfo.size = val
                this.obtainPosts()
            },
            handleCurrentChange (val) {
                this.pageInfo.page = val
                this.obtainPosts()
            },
            filling (data) {
                if (data.data) {
                    this.posts = data.data.records
                    this.pageInfo.total = data.data.total
                }
            },
            obtainPosts () {
                let queryInfo = {
                    authorId: this.id,
                    page: this.pageInfo.page,
                    size: this.pageInfo.size
                }
                if (this.self) {
                    this.action(this.pageCurrentPostsAction(queryInfo), data => this.filling(data))
                } else {
                    this.action(this.pageAuthorPostsAction(queryInfo), data => this.filling(data))
                }
            },
            deletePost (id) {
                this.action(this.deletePostAction(id), data => {
                    this.$message.success('删除成功')
                    let index = this.posts.findIndex(post => post.id === id)
                    this.posts.splice(index, 1)
                })
            },
            changeLabelAttention (data) {
                this.posts.forEach(post => {
                    post.labels.forEach(label => {
                        if (label.id === data.id) {
                            label.attentionCount += data.inc
                        }
                    })
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .management-btn {
        float: right;
    }

    .none {
        height: 300px;
        line-height: 300px;
    }

    .post-item-plus {
        height: 90px;
    }
</style>
